<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片 3D 立体效果</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background-color: #333;
      padding-top: 50px;
    }
    .card {
      width: 300px;
      border-radius: 10px;
      transition:  .3s;
      margin-left: 50px;
      overflow: hidden;
    }
    .card:hover {
      box-shadow: -3px -3px 10px #54a48e, 3px 3px 10px #a79d66;
    }
    /* ---------------- */
    
    .card:hover {
      transform:  perspective(500px) 
      rotateX(var(--rx, 0deg)) 
      rotateY(var(--ry, 0deg));
    }
  </style>
</head>
<body>
  <div class="card">
    <img src="https://pic4.zhimg.com/v2-d509ad062ac7f47a6c2c3e2eb0cc585f_r.jpg" width="300" alt="">

    <script>
      const card = document.querySelector('.card');

      const range = [-5, 5];  // 设置移动范围

      function getRotation(range, mousePos, length) {
        return ((range[1] - range[0])  / length) * mousePos + range[0];
      }

      card.onmousemove = (e) => {
        const  { offsetX, offsetY } = e;
        const { width, height } = card.getBoundingClientRect();
        const rx = getRotation(range, offsetX, height)
        const ry = -getRotation(range, offsetY, width)

        card.style.setProperty('--rx', `${rx}deg`)
        card.style.setProperty('--ry', `${ry}deg`)
      }

      card.onmouseleave = () => {
        card.style.setProperty('--rx', '0deg')
        card.style.setProperty('--ry', '0deg')
      }


    </script>
  </div>
</body>
</html>